<template>
  <view class="swiperContainer">
    <swiper
      class="swiperTag"
      :indicator-dots="swiperOption.indicatorDots"
      :indicator-color="swiperOption.indicatorColor"
      :indicator-active-color="swiperOption.indicatorActiveColor"
      :autoplay="swiperOption.autoplay"
      :interval="swiperOption.interval"
      :duration="swiperOption.duration"
    >
      <block v-for="(item, index) in swiperOption.background" :key="index">
        <swiper-item>
          <image
            class="swiperItem"
            :src="item.pic"
            mode="aspectFill"
            lazy-load="false"
          ></image>
        </swiper-item>
      </block>
    </swiper>
  </view>
</template>
<script>
import { BASE_URL } from "../../util/api";

export default {
  name: "MySwiper",
  data () {
    return {
      // 轮播图
      swiperOption: {
        current: 0,
        background: [
          {
            id: 1,
            pic: BASE_URL + "/cfpatrol/static/img/swiper1.jpg"
          },
          {
            id: 2,
            pic: BASE_URL + "/cfpatrol/static/img/swiper2.jpg"
          },
          {
            id: 3,
            pic: BASE_URL + "/cfpatrol/static/img/swiper3.jpg"
          },
          {
            id: 4,
            pic: BASE_URL + "/cfpatrol/static/img/swiper4.jpg"
          },
          {
            id: 5,
            pic: BASE_URL + "/cfpatrol/static/img/swiper5.jpg"
          }
        ],
        indicatorDots: true,
        indicatorColor: "#CCCCCC",
        indicatorActiveColor: "#e50000",
        vertical: false,
        autoplay: true,
        interval: 5000,
        duration: 500,
      }
    }
  }
};
</script>
<style scoped>
.swiperContainer {
  box-sizing: border-box;
  width: 100%;
  z-index: 10;
  margin: 30rpx auto 0;
  padding: 0 30rpx;
  height: 320rpx;
  overflow: visible;
}
.swiperTag {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: visible;
  /*border-radius: 20px;*/
  /*box-shadow: 0 3px 30px rgba(0, 0, 0, 0.15);*/
}

.swiperItem {
  width: 100%;
  height: 100%;
  border-radius: 20rpx;
  overflow: hidden;
}
</style>
